<template>
  <div>
    <h2>vue路由测试</h2>
    <!-- 导航区 -->
     <div>
      <!-- 
        active-class:当选择的导航是对应的页面时,active-class指定的class样式生效
        当选择首页导航时,首页对应的active-class生效,如果没有选择首页导航,则不会生效
        用户与商品导航类似
      -->
      <!-- 第一种:字符串用法,其值直接指定对应的路由地址 -->
      <RouterLink to="/home" active-class="selected">首页</RouterLink>
      <!-- 第二种:对象用法,可以通过对象来指定访问的路由属性 -->
      <RouterLink :to="{path: '/user'}" active-class="selected">用户页</RouterLink>
      <!-- 除了指定path以外,还可以指定其他属性,例如:name -->
      <RouterLink :to="{name: 'sp'}" active-class="selected">商品页</RouterLink>
     </div>

    <!-- 展示区 -->
     <div class="constainer">
      <RouterView></RouterView>
     </div>
  </div>
</template>

<script setup>
import { RouterLink,RouterView } from 'vue-router';
</script>

<style scoped>
.constainer{
  width: 500px;
  height: 500px;
  border: 1px solid red;
}
.selected{
  background-color: red;
}
</style>
